<template>
  <el-button type="text" @click="handleLogout">退出登录</el-button>
</template>

<script>
import { logout } from '@/api/user'

export default {
  name: 'LogoutButton',
  methods: {
    async handleLogout() {
      try {
        // 打印当前token，用于调试
        console.log('Current token:', localStorage.getItem('token'))
        
        // 发送退出请求
        console.log('Sending logout request...')
        const res = await logout()
        console.log('Logout response:', res)

        if (res.code === 1) {
          // 清除本地存储的用户信息和token
          localStorage.removeItem('token')
          localStorage.removeItem('userInfo')
          
          // 提示用户
          this.$message.success('退出成功')
          
          // 跳转到登录页
          this.$router.push('/login')
        } else {
          this.$message.error(res.msg || '退出失败')
        }
      } catch (error) {
        console.error('Logout error:', error)
        console.error('Error details:', {
          message: error.message,
          response: error.response,
          config: error.config
        })
        
        // 如果是网络错误或后端未响应
        if (!error.response) {
          this.$message.error('网络错误，请检查网络连接')
          return
        }
        
        // 根据错误状态码处理
        switch (error.response.status) {
          case 401:
            this.$message.error('登录已过期，请重新登录')
            this.$router.push('/login')
            break
          case 404:
            this.$message.error('接口不存在，请联系管理员')
            break
          default:
            this.$message.error(error.response?.data?.message || '退出失败，请稍后重试')
        }
      }
    }
  }
}
</script>

<style scoped>
/* 可以添加自定义样式 */
</style> 